<template>
  <el-form
    :disabled="disabled"
    inline
    size="mini"
    :model="formData"
    class="demo-form-inline"
    ref="miniForm"
    :v-bind="$attrs"
    v-on="$listeners"
    :rules="rules"
    label-position="left"
    label-width="auto">
    <el-form-item :prop="item.prop" v-for="(item,key) in formFields" :label="item.label" :key="key" :rules="item.rules">
      <template v-if="item.type == 'input'">
        <my-input style="width: 120px" v-model="formData[item.prop]" :maxlength="item.max?item.max:20"></my-input>
      </template>
      <template v-else-if="item.type == 'select'">
        <my-select style="width: 120px" v-model="formData[item.prop]" :options="item.options" :dict="item.dict" :url="item.url"></my-select>
      </template>
      <template v-else-if="item.type == 'date'">
        <my-date style="width: 120px" v-model="formData[item.prop]"></my-date>
      </template>
      <template v-else-if="item.type == 'rate'">
        <my-rate style="margin-top: 10px" v-model="formData[item.prop]"></my-rate>
      </template>
      <template v-else-if="item.type == 'switch'">
        <my-switch v-model="formData[item.prop]"></my-switch>
      </template>
      <template v-else-if="item.type == 'number'">
        <my-input-number style="width: 120px" v-model="formData[item.prop]"></my-input-number>
      </template>
      <template v-else-if="item.type == 'radio'">
        <my-radio v-model="formData[item.prop]" :options="item.options" :dict="item.dict" :url="item.url"></my-radio>
      </template>
      <template v-else-if="item.type == 'cascader'">
        <my-cascader style="width: 120px" v-model="formData[item.prop]" :options="item.options" :url="item.url"></my-cascader>
      </template>
      <template v-else-if="item.type == 'time'">
        <my-time-picker v-model="formData[item.prop]"></my-time-picker>
      </template>
    </el-form-item>
    <div style="text-align: right">
      <my-button type="success" plain @click.prevent="handleSave">保存</my-button>
      <my-button type="success" plain @click.prevent="handleReset">重置</my-button>
    </div>
  </el-form>
</template>

<script>
  export default {
    name: 'my-mini-form',
    props: {
      /** 表单字段 **/
      formFields: {
        type: Array,
        default: ()=>{
          return [];
        }
      },
      /** 表单整体验证规则,也可以在formFields中的每一条添加rules来单独添加验证规则 **/
      rules: {
        type: Object,
        default: ()=>{
          return {}
        }
      },
      /** 编辑时传的实体类 **/
      data:{
        type: Object,
        default: ()=>{
          return {}
        }
      },
      /** 是否禁用 **/
      disabled: {
        type: Boolean,
        default: false
      },
      /** 保存路径 **/
      saveUrl: {
        type: String
      },
    },
    data(){
      return {
        formData:{},
        loading: false
      }
    },
    methods:{
      /** 保存按钮 **/
      handleSave(){
        this.$refs.miniForm.validate(val => {
          if(val){
            this.loading = true;
            this.$ajax.requestCommonPost(this.saveUrl,this.formData).then(()=>{
              this.$message.success('保存成功');
              this.handleReset();
              this.$emit('save')
            }).finally(()=>{
              this.loading = false;
            })
          }
        })
      },
      /** 重置表单 **/
      handleReset(){
        this.$emit('reset');
        this.$refs.miniForm.resetFields();
      },
      /** 初始化表单赋值 **/
      init(){
        let obj = {};
        for(let key in this.data){
          obj[key] = this.data[key]
        }
        this.formData = obj
      }
    },
    created() {
      this.init();
    },
    watch:{
      data: {
        deep: true,
        handler(){
          this.init();
        }
      }
    }
  }
</script>

<style scoped>

</style>
